<template>
    <pui-drawer show :title="mainRef.tabList.name" position="left">
        <div class="form-drawer-content">
            <div class="form-tab horizontal-tab">
                <div class="tabs-content">
                    <div class="list-content outer">
                        <div class="content" v-show="mainRef.modelType === 'laser-line'">
                            <div class="form">
                                <div class="form-content" v-show="mainRef.nowTabIndex === 0">
                                    <div class="form-item">
                                        <div class="label">发射截面(m²):</div>
                                        <pui-selector :dataList="mainRef.opList" v-model="mainRef.laserLine.fsjm"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">吸收截面(m²):</div>
                                        <pui-selector :dataList="mainRef.opList" v-model="mainRef.laserLine.xsjm"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波长(nm):</div>
                                        <pui-selector :dataList="mainRef.opList" v-model="mainRef.laserLine.waveLength"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">铒离子掺杂浓度(m^-3):</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.cznd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">分段数:</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.fds" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">泵浦功率限制因子(μm):</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.bpglxzyz" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波段功率限制因子(μm):</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.bdglxzyz" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">泵浦有效面积(μm):</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.bpyxmj" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">光纤长度(m):</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.gxcd" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 1">
                                    <div class="form-item">
                                        <div class="label">正向泵浦功率:</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.zxbpgl" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">反向泵浦功率:</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.fxbpgl" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 2">
                                    <div class="form-item">
                                        <div class="label"><pui-radio-group v-model="mainRef.paramsModel" :list="mainRef.paramsList1"></pui-radio-group></div>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">中心频率(nm):</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.zxpl1" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">带宽(nm):</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.dk1" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label"><pui-radio-group v-model="mainRef.paramsModel" :list="mainRef.paramsList2"></pui-radio-group></div>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">中心频率(nm):</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.zxpl2" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">带宽(nm):</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.dk2" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 3">
                                    <div class="form-item">
                                        <div class="label">入射光信号（w）:</div>
                                        <input class="pui-input" v-model="mainRef.laserLine.rsgxh" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                            </div>
                            <div class="tab-column">
                                <div :class="['tab-column_item', mainRef.nowTabIndex === i && 'active']" @click="tabClickHandle(i)" :key="i" v-for="(item, i) in mainRef.tabList.list"><span>{{ item }}</span></div>
                            </div>
                        </div>
                        <div class="content" v-show="mainRef.modelType === 'laser-ring'">
                            <div class="form">
                                <div class="form-content" v-show="mainRef.nowTabIndex === 0">
                                    <div class="form-item">
                                        <div class="label">发射截面(m²):</div>
                                        <pui-selector :dataList="mainRef.opList" v-model="mainRef.laserRing.fsjm"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">吸收截面(m²):</div>
                                        <pui-selector :dataList="mainRef.opList" v-model="mainRef.laserRing.xsjm"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波长(nm):</div>
                                        <pui-selector :dataList="mainRef.opList" v-model="mainRef.laserRing.waveLength"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">铒离子掺杂浓度(m^-3):</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.cznd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">分段数:</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.fds" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">泵浦功率限制因子(μm):</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.bpglxzyz" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波段功率限制因子(μm):</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.bdglxzyz" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">泵浦有效面积(μm):</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.bpyxmj" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">光纤长度(m):</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.gxcd" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 1">
                                    <div class="form-item">
                                        <div class="label">正向泵浦功率:</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.zxbpgl" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">反向泵浦功率:</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.fxbpgl" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 2">
                                    <div class="form-item">
                                        <div class="label">中心频率(nm):</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.zxpl" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">带宽(nm):</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.dk" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 3">
                                    <div class="form-item">
                                        <div class="label">入射光信号（w）:</div>
                                        <input class="pui-input" v-model="mainRef.laserRing.rsgxh" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                            </div>
                            <div class="tab-column">
                                <div :class="['tab-column_item', mainRef.nowTabIndex === i && 'active']" @click="tabClickHandle(i)" :key="i" v-for="(item, i) in mainRef.tabList.list"><span>{{ item }}</span></div>
                            </div>
                        </div>
                        <div class="content" v-show="mainRef.modelType === 'amplifier'">
                            <div class="form">
                                <div class="form-content" v-show="mainRef.nowTabIndex === 0">
                                    <div class="form-item">
                                        <div class="label">发射截面(m²):</div>
                                        <pui-selector :dataList="mainRef.opList" v-model="mainRef.amplifier.fsjm"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">吸收截面(m²):</div>
                                        <pui-selector :dataList="mainRef.opList" v-model="mainRef.amplifier.xsjm"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波长(nm):</div>
                                        <pui-selector :dataList="mainRef.opList" v-model="mainRef.amplifier.waveLength"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">铒离子掺杂浓度(m^-3):</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.cznd" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">分段数:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.fds" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">泵浦功率限制因子(μm):</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.bpglxzyz" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波段功率限制因子(μm):</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.bdglxzyz" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">泵浦有效面积(μm):</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.bpyxmj" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">光纤长度(m):</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.gxcd" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 1">
                                    <div class="form-item">
                                        <div class="label">正向泵浦功率:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.zxbpgl" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">反向泵浦功率:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.fxbpgl" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                                <div class="form-content" v-show="mainRef.nowTabIndex === 2">
                                    <div class="form-item">
                                        <div class="label"><pui-radio-group v-model="mainRef.paramsModel" :list="mainRef.paramsList1"></pui-radio-group></div>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">输入波长:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.srbc1" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">带宽类型:</div>
                                        <pui-selector :dataList="mainRef.dkList" v-model="mainRef.amplifier.dklx1"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">各通道中心频率:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.gtdzxpl1" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波长通道数:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.bctds1" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">各通道复信号序列:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.gtdfxhxl1" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">信号平均功率:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.xhpjgl1" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">消光比:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.xgb1" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label"><pui-radio-group v-model="mainRef.paramsModel" :list="mainRef.paramsList2"></pui-radio-group></div>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">输入波长:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.srbc2" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">带宽类型:</div>
                                        <pui-selector :dataList="mainRef.dkList" v-model="mainRef.amplifier.dklx2"></pui-selector>
                                    </div>
                                    <div class="form-item">
                                        <div class="label">各通道中心频率:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.gtdzxpl2" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">波长通道数:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.bctds2" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">消光比:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.xgb2" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">信号平均功率:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.xhpjgl2" type="text" placeholder="请输入" />
                                    </div>
                                    <div class="form-item">
                                        <div class="label">信号数量:</div>
                                        <input class="pui-input" v-model="mainRef.amplifier.xhsl2" type="text" placeholder="请输入" />
                                    </div>
                                </div>
                            </div>
                            <div class="tab-column">
                                <div :class="['tab-column_item', mainRef.nowTabIndex === i && 'active']" @click="tabClickHandle(i)" :key="i" v-for="(item, i) in mainRef.tabList.list"><span>{{ item }}</span></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </pui-drawer>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    name: 'horizontal-design',
})
</script>
<script lang="ts" setup>
import { reactive, getCurrentInstance, nextTick } from 'vue'
import ContextMenu from '../../MenuContext'
const { proxy } = getCurrentInstance() as any
const emit = defineEmits({
    'showSetting': (val: any) => {},
    'showQuantumWell': (val: any) => {}
})
const mainRef = reactive({
    modelType: '',
    isActive: false,
    isDisabled: false,
    nowTabIndex: 0,
    nowArea: [0, 0],
    paramsModel: 'params1',
    paramsList1: [{label: '参数组1', value: 'params1'}],
    paramsList2: [{label: '参数组2', value: 'params2'}],
    tabList: {
        name: '线形腔掺杂光纤激光器-参数设置',
        list: ['掺铒光纤', '泵浦', '反射器']
        // list: ['掺铒光纤', '泵浦', '反射器', '输入信号']
    },
    opList: [
        { label: '默认值', value: '1' },
        { label: '自定义', value: '2' },
    ],
    dkList: [
        { label: 'ITUT_50G', value: '1' },
        { label: 'ITUT_100G', value: '2' },
        { label: 'ITUT_12.5G', value: '3' },
    ],
    laserLine: {
        width: '100',
        fsjm: '1',
        xsjm: '1',
        waveLength: '1',
        cznd: '4e24',
        fds: '3',
        bpglxzyz: '0.8',
        bdglxzyz: '0.7',
        bpyxmj: '50e-12',
        gxcd: '10',
        zxbpgl: '300',
        fxbpgl: '100',
        zxpl1: '300',
        dk1: '100',
        zxpl2: '300',
        dk2: '100',
        rsgxh: '100'
    },
    laserRing: {
        width: '100',
        fsjm: '1',
        xsjm: '1',
        waveLength: '1',
        cznd: '4e24',
        fds: '3',
        bpglxzyz: '0.8',
        bdglxzyz: '0.7',
        bpyxmj: '50e-12',
        gxcd: '10',
        zxbpgl: '300',
        fxbpgl: '100',
        zxpl: '300',
        dk: '100',
        rsgxh: '100'
    },
    amplifier: {
        width: '100',
        fsjm: '1',
        xsjm: '1',
        waveLength: '1',
        cznd: '4e24',
        fds: '3',
        bpglxzyz: '0.8',
        bdglxzyz: '0.7',
        bpyxmj: '50e-12',
        gxcd: '10',
        zxbpgl: '300',
        fxbpgl: '100',
        dklx1: '1',
        gtdzxpl1: '100',
        srbc1: '100',
        bctds1: '100',
        gtdfxhxl1: '100',
        xhpjgl1: '100',
        xgb1: '100',
        dklx2: '1',
        bctds2: '100',
        gtdzxpl2: '100',
        srbc2: '100',
        xhpjgl2: '100',
        xgb2: '100',
        xhsl2: '100',
    }
}) as any
const computed = () => {

}
const tabClickHandle = (i: any) => {
    mainRef.nowTabIndex = i
    
}
const showContextMenu = (e: any) => {
    const menuList = [
        {
            label: '编辑对象属性',
            type: 'edit',
            fn: () => {
            }
        },
        {
            label: '删除',
            type: 'delete',
            fn: () => {
            }
        }
    ]
    e.preventDefault()
    ContextMenu(e, menuList)
}
const init = (type: any) => {
    mainRef.nowTabIndex = 0
    mainRef.modelType = type || 'amplifier'
    mainRef.tabList = type === 'laser-line' ? {
        name: '线形腔掺杂光纤激光器-参数设置',
        list: ['掺铒光纤', '泵浦', '反射器']
    } : mainRef.tabList = type === 'laser-ring' ? {
        name: '环形腔掺杂光纤激光器-参数设置',
        list: ['掺铒光纤', '泵浦', '滤波器']
    } : {
        name: '有源光纤放大器-参数设置',
        list: ['掺铒光纤', '泵浦', '输入信号']
    }
}
defineExpose({
    init
})
</script>